<!-- // webpack? Web前端发展速度快速的 后端JSP，PHP到前端原生JavaScript，到jQuery开发，再到目前三大框架Vue，React，Angular
//开发模式从原来的JavaScript的ES5语法到ES6～10等，到TypeScript，包括编写CSS的预处理器less，scss等
//开发的复杂化 问题？
//1.需要通过模块化来开发 2.高级特性来加快我们开发效率或者安全性，通过ES6+，TypeScript开发脚本逻辑，通过sass，less等方式来编写css样式
//3.开发过程中，我们希望监听文件的变化反映到浏览器上，提高开发效率，4.代码压缩，合并以及其他相关的优化
//前端三个框架的脚手架 依赖Webpack来帮助我们支持模块化，less，TypeScript，打包优化等。

//Webpack是什么？
//static module bundler for modern JavaScript applications 静态的模块化打包工具,为现代的JavaScript应用程序
//打包bundler：webpack可以帮助我们打包
//静态的static：我们最终可以将代码打包成最终的静态资源（部署到静态服务器上）
//模块化module：webpack默认支持各种模块化开发，ES Module，CommonJs，AMD等
//现代的modern：因为前端开发面临各种各样的问题，才会催生webpack的出现和发展
//实际中
//需要做一些特殊的配置比如起别名，要支持sass，less等预处理器，希望手动TypeScript的支持。
//特殊配置提供性能：安装性能分析工具，使用gzip压缩代码，引用cdn的资源，公共代码的抽取，编写属于自己的loader和plugin 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./build/bundle.js"></script> 
</body>
</html>
<!-- 先找webpack.config.js 找index.js 指定对应的配置文件
  webpack如何进行打包的，它会根据命令或者配置文件找到入口文件
  从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如js文件，css文件，图片，字体等）
  然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）
  //tree shaking
  2.需要一个loader来加载这个css文件，loader是对模块的源代码进行转换
  将css文件也可以看成是一个模块
  webpack无法识别所以不知道如何对其进行加载，我们要制定对应的loader来完成这个功能
  处理css 用css-loader
  //配置方式的意思就是说我们可以在webpack.config.js文件中写明配置信息
  module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）
  Rule对象
  {test属性:规则使用正则表达式  //匹配资源
    use属性：对应值是一个数组[UseEntry]
    UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
    loader：必须有一个loader属性，对应的值是一个字符串
    options：可选的属性，值是一个字符串或者对象，值会被传入到loader中
  }
  css-loader只是负责对.css文件进行解析，并不会将解析后的css插入到页面中
  我们要的效果是插入style的操作，还需要引入另外一个loader，就是style-loader
  从下往上
  预处理器
  //浏览器的兼容性
  如何解决和处理？不是屏幕大小的变化适配；针对不同的浏览器支持的特性：css特性，js语法，之间的兼容性
  现在的前端非常的工程化 所以很好解决 
  项目到底支持哪些浏览器？浏览器市场占有率
  认识browserslist工具？what？是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置
  npx browserslist ">1%,last 2 version,not dead"
  认识PostCSS工具
  PostCSS是一个通过JavaScript来转换样式的工具
  可以帮助我们进行一些CSS的转换和适配，如自动添加浏览器前缀，css样式的重置
  实现这些功能，需要借助于PostCSS对应的插件
  如何使用：1.查找PostCSS在构建工具中的扩展，如webpack中的postcss-loader
  2.选择可以添加你需要的PostCSS相关的插件
  npx postcss --use autoprefixer  -o result.css ./src/css/test.css  命令行转换
  postcss-preset-env 作用：转换一些现代的css特性转换为大部分浏览器都能识别的css
  加载处理其他资源
  file-loader:处理jpg，png等格式的图片，我们也需要有对应的loader：file-loader
  file-loader的作用就是帮助我们处理import/require（）方式引入的一个文件资源，并且会将它放到我们
  输出的文件夹中


-->
